<!--
描述：baseImportExcel 导入Excel组件
开发人：hqj
开发日期：2018年9月21日
-->
<template lang="pug">
  div.block
    el-upload(class="upload-demo"
    drag
    ref="upload"
    v-bind:limit="1"
    accept=".xlsx, .xls"
    v-bind:on-preview="handlePreview"
    v-bind:on-remove="handleRemove"
    v-bind:on-success="handleSuccess"
    v-bind:on-error="handleError"
    v-bind:auto-upload="false" v-bind:action="action" v-bind:headers="headers" v-bind:data="data")
      i(class="el-icon-upload")
      div(class="el-upload__text") 将文件拖到此处，或
        em 点击选择文件
        div(slot="tip" class="el-upload__tip") 只能上传Excel文件
    el-button(style="margin-left: 10px;margin-top: 10px;z-index:99999" size="big" type="success" @click="submitUpload") 上传到服务器
</template>

<script type="text/ecmascript-6">
  import Cache from '../../common/cache.js'
  import Message from '../../common/message.js'

  export default {
    name: 'kalix-import-excel',
    props: {
      data: {
        type: Object
      }
    },
    data() {
      return {
        action: this.$KalixGlobalConfig.baseURL + this.$KalixGlobalConfig.importExcelURL,
        headers: {'access_token': Cache.get('access_token'), 'jsessionid': Cache.get('user_token')},
        isOK: false // 判断是否成功导入同一个文件
      }
    },
    mounted() {
    },
    methods: {
      submitUpload() {
        if (this.$refs.upload.uploadFiles && this.$refs.upload.uploadFiles.length) {
          if (this.isOK) {
            Message.info('该文件已经导入完毕，如需再次导入，请清除或关闭该文件后重新选择！')
          } else {
            this.loading = this.$loading({
              lock: true,
              text: 'Excel数据导入中...',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            })
            this.$refs.upload.submit()
          }
        } else {
          Message.info('请选择导入文件!')
        }
      },
      handleRemove(file, fileList) {
        this.isOK = false
      },
      handlePreview(file) {
        console.log(file)
      },
      handleSuccess(response, file, fileList) {
        if (response.success) {
          // Message.success(response.msg)
          alert(response.msg)
        } else {
          // Message.error(response.msg)
          alert(response.msg)
        }
        this.loading.close()
        this.isOK = true
      },
      handleError(err, file, fileList) {
        console.log(err, file, fileList)
        this.loading.close()
      }
    }
  }
</script>

<style scoped lang="stylus">
  .el-form
    padding 30px 70px 30px 20px
</style>
